
import { UsersProvider } from './views/usersContext';

import styles from './App.module.css';

import { Link, Routes, Route, useNavigate, NavLink } from 'react-router-dom';

import Home from './views/Home';
import About from './views/About';
import UserList from './views/UserList';
import UserDetail from './views/UserDetail';

const Default = function(props){
  return (
    <div>Default</div>
  )
}

const Baidu = function(props){
  return (
    <div>
      <p>百度</p>
    </div>
  )
}

function App(){

  let navigate = useNavigate();

  function myNavigate(){
    navigate( '/baidu' )
  }

  const users = [
    { id: 2098, account: 'zhangsanfeng', nickname: '张三丰' },
    { id: 1075, account: 'zhangcuishan', nickname: '张翠山' },
    { id: 2046, account: 'yinsusu', nickname: '殷素素' },
    { id: 8976, account: 'zhangwuji', nickname: '张无忌' }
  ];

  return (
    <div className={ styles.wrapper }>
      <div className={ styles.header }>
        <Link to="/">首页</Link>
        <Link to="/home">主页</Link>
        <Link to="/about">关于</Link>
        <button onClick={ myNavigate }>百度</button>
        <NavLink to="/user/list">用户列表</NavLink>
      </div>
      
      
      <div className={ styles.main }>
        <Routes>
          {/* 默认路由 */}
          <Route path="/" element={ <Default /> } />
          <Route path="/home" element={ <Home /> } />
          <Route path="/about" element={ <About /> } />
          <Route path="/baidu" element={ <Baidu /> } />
          <Route path="/user/list" element={ 
            <UsersProvider value={ users }>
              <UserList />
            </UsersProvider>
          } />
          {/* 在定义路由时声明参数 */}
          <Route path="/user/detail/:id" element={ 
            <UsersProvider value={ users }>
              <UserDetail />
            </UsersProvider>
          } />
          <Route path="/user/detail" element={ 
            <UsersProvider value={ users }>
              <UserDetail />
            </UsersProvider>
          } />
          {/* "No Match" Route */}
          <Route  path="*"
                  element={
                    <main style={{ padding: "1rem" }}>
                      <p>There's nothing here!</p>
                    </main>
                  } />
        </Routes>
      </div>
    </div>
  )
}

export default App;